<template>
    <div class="basic_manage_span">
        <table-span
            :current-page="tabelData.current"
            :page-size="tabelData.size"
            :total="tabelData.total"
            :isShowTool="false"
            :size-change="handleSizeChange" 
            :current-change="handleCurrentChange">
            <template v-slot:searchItem>
                <div class="search_item_span search_item_fix_width">
                    <el-input size="default" v-model="sysDictCondition.type"
                        placeholder="请输入字典类型" clearable></el-input>
                </div>
                <div class="search_item_span search_item_fix_width">
                    <el-input size="default" v-model="sysDictCondition.label"
                        placeholder="请输入字典描述" clearable></el-input>
                </div>
                <div class="search_item_span">
                    <el-button icon="Search" size="default" type="primary" @click="searchData">查询</el-button>
                </div>
                <div class="search_item_span">
                    <el-button icon="Plus" size="default"
                        type="primary" :disabled="!(btOption.btSaveDict)"
                        @click="btInsertDict">新增数据字典</el-button>
                </div>
            </template>
            <template v-slot:searchTable>
                <el-table :data="tabelData.records" size="default" height="100%" style="width: 100%;">
                    <el-table-column
                        align="center"
                        type="index"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="type"
                        label="字典类型"
                        min-width="240">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="value"
                        label="字典值"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="label"
                        label="字典描述"
                        width="240">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="description"
                        label="字典类型描述"
                        min-width="240">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="sort"
                        label="字典排序"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        align="center"
                        label="操作"
                        width="240">
                        <template #default="scope">
                            <el-button size="small" :disabled="!(btOption.btUpdateDict)"
                            @click="updateDict(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="danger"  :disabled="!(btOption.btDeleteDict)"
                            @click="deleteDict(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </table-span>
        <el-dialog
            :title="sysDictOption.title"
            v-model="sysDictOption.isShow"
            @close="sysDictDialogClose"
            :before-close="sysDictDialogBeforeClose"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="450px">
            <el-form ref="sysDictFormRef" :model="sysDictForm" :rules="sysDictRules" label-width="100px" size="default">
                <el-form-item label="字典类型" prop="type">
                    <el-input v-model="sysDictForm.type" placeholder="请输入字典类型" :disabled="sysDictOption.disabled" clearable></el-input>
                </el-form-item>
                <el-form-item label="字典值" prop="value">
                    <el-input v-model="sysDictForm.value" placeholder="请输入字典值" :disabled="sysDictOption.disabled" clearable ></el-input>
                </el-form-item>
                <el-form-item label="字典值描述" prop="label">
                    <el-input v-model="sysDictForm.label" placeholder="请输入字典值描述" clearable ></el-input>
                </el-form-item>
                <el-form-item label="字典类型描述" prop="description">
                    <el-input v-model="sysDictForm.description" placeholder="请输入字典类型描述" clearable></el-input>
                </el-form-item>
                <el-form-item label="字典排序" prop="sort">
                    <el-input-number v-model="sysDictForm.sort" :min="1" :max="999" style="width: 100%"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button size="default" @click="dialogCancel">取 消</el-button>
                <el-button size="default" type="primary" @click="sysDictDialogSave">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script>
    import TableSpan from '@/components/table-span.vue';
    import {tool} from "@/js/tool.js";
    import { ElMessage } from 'element-plus'

    export default {
        name: "sysDict",
        data: function(){
            return {
                btOption: {
                    btSaveDict: null,
                    btUpdateDict: null,
                    btDeleteDict: null
                },
                tabelData: {
                    total: 0,
                    size: 10,
                    current: 1,
                    records: []
                },
                sysDictCondition: {
                    type: "",
                    label: "",
                    page: 1,
                    size: 10
                },
                sysDictOption: {
                    title: "",
                    type: "", // 1新增；2修改
                    isShow: false,
                    disabled: false
                },
                sysDictForm: {
                    mainId: null,
                    type: "",
                    value: "",
                    label: "",
                    description: "",
                    sort: 1
                },
                sysDictRules: {
                    type : [
                        { required: true, message: '请输入字典类型', trigger: 'blur' }
                    ],
                    label : [
                        { required: true, message: '请输入字典值描述', trigger: 'blur' }
                    ],
                    value : [
                        { required: true, message: '请输入字典项', trigger: 'blur' }
                    ],
                    sort : [
                        { required: true, message: '请输入字典排序', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            searchData: function(){
                getSysDictList(this);
            },
            handleSizeChange: function(val){
                this.sysDictCondition.size = val;
                this.sysDictCondition.page = 1;
                getSysDictList(this);
            },
            handleCurrentChange: function(val){
                this.sysDictCondition.page = val;
                getSysDictList(this);
            },
            btInsertDict: function(){
                this.sysDictOption.type = 1;
                this.sysDictOption.title = "新增字典项";
                this.sysDictOption.isShow = true;
            },
            updateDict: function(index,row){
                this.sysDictOption.type = 2;
                this.sysDictOption.title = "修改字典项";
                this.sysDictOption.isShow = true;
                this.sysDictOption.disabled = true;
                this.sysDictForm = {
                    mainId: row.mainId,
                    type: row.type,
                    value: row.value,
                    label: row.label,
                    description: row.description,
                    sort: row.sort
                }
            },
            deleteDict: function(index,row){
                const obj = this;
                const confirmMessage = "是否删除第"+ (index + 1) +"行字典项？";
                this.$confirm(confirmMessage).then(function(){
                    deleteSysDict(obj, row);
                }).catch(function(){});
            },
            sysDictDialogClose: function(){
                this.sysDictForm = {
                    mainId: null,
                    type: "",
                    value: "",
                    label: "",
                    modelName: "",
                    sort: 1
                }
                this.$refs["sysDictFormRef"].clearValidate();
                this.sysDictOption.disabled = false;
            },
            sysDictDialogBeforeClose: function(){
                dialogCloseTips(this);
            },
            dialogCancel: function(){
                dialogCloseTips(this);
            },
            sysDictDialogSave: function(){
                const obj = this;
                this.$refs["sysDictFormRef"].validate(function(valid){
                    if (valid) {
                        if(obj.sysDictOption.type == 1){
                            //新增
                            saveSysDict(obj);
                        }else{
                            //修改
                            updateSysDict(obj);
                        }
                    } else {
                        return false;
                    }
                });
            }
        },
        created: function(){
            const menuId = [this.$route.query.menuId]
            const obj = this;
            new tool.getAuthorisedRequest(menuId, this.btOption, function(){
                //获取一级菜单
                getSysDictList(obj);
            });
        },
        components: {
            TableSpan
        }
    }

    /**
     * 获字典数据列表
     * @param app app对象
     */
    function getSysDictList(app){
        let param = app.sysDictCondition;
        const url = "/basic/dict/getDictList";
        tool.formJsonRequest(url,param,null,function(data){
            if(data.code === "0000"){
                app.tabelData.records = data.data.records;
                app.tabelData.total = data.data.total;
                app.tabelData.size = data.data.size;
                app.tabelData.current = data.data.current;
            }else{
                ElMessage({
                    showClose: true,
                    message: data.message,
                    type: 'error'
                });
            }
        });
    }

    /**
     * 获取数据库表
     * @param app app对象
     */
     function saveSysDict(app){
        const param = app.sysDictForm;
        const url = "/basic/dict/saveDict";
        tool.formJsonRequest(url,param,null,function(data){
            if(data.code === "0000"){
                ElMessage({
                    showClose: true,
                    message: '字典项保存成功',
                    type: 'success'
                });
                getSysDictList(app);
                app.sysDictOption.isShow = false;
            }else{
                ElMessage({
                    showClose: true,
                    message: data.message,
                    type: 'error'
                });
            }
        });
    }

    /**
     * 获取数据库表
     * @param app app对象
     */
     function updateSysDict(app){
        const param = app.sysDictForm;
        const url = "/basic/dict/updateDict";
        tool.formJsonRequest(url,param,null,function(data){
            if(data.code === "0000"){
                ElMessage({
                    showClose: true,
                    message: '字典项更新成功',
                    type: 'success'
                });
                getSysDictList(app);
                app.sysDictOption.isShow = false;
            }else{
                ElMessage({
                    showClose: true,
                    message: data.message,
                    type: 'error'
                });
            }
        });
    }


    /**
     * 获取数据库表
     * @param app app对象
     * @param row 数据行数
     */
     function deleteSysDict(app, row){
        const param = {
            mainId: row.mainId
        };
        const url = "/basic/dict/deleteDict";
        tool.formJsonRequest(url,param,null,function(data){
            if(data.code === "0000"){
                ElMessage({
                    showClose: true,
                    message: '字典项删除成功',
                    type: 'success'
                });
                getSysDictList(app);
                app.sysDictOption.isShow = false;
            }else{
                ElMessage({
                    showClose: true,
                    message: data.message,
                    type: 'error'
                });
            }
        });
    }

    /**
     * 关闭dialog的提示信息
     * @param app
     */
    function dialogCloseTips(app) {
        var confirmMessage = "";
        if(app.sysDictOption.type == "1"){
            confirmMessage = "是否放弃新增字典项？";
        }else{
            confirmMessage = "是否放弃修改字典项？";
        }
        var obj = app;
        app.$confirm(confirmMessage).then(function(){
            obj.sysDictOption.isShow = false;
        }).catch(function(){});
    }
</script>
<style>
    .basic_manage_span{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
        flex-wrap : wrap;
    }
    .search_item_span{
        max-width: 190px;
        height: auto;
        margin-top: 5px;
        margin-left: 10px;
    }
    .search_item_fix_width{
        width: 190px;
    }
</style>